import { connect } from 'react-redux'
import { toggleTodo } from '../actions' // 引入需要使用的actions动作
import { VisibilityFilters } from '../actions' // 这是常量动作、全部显示之类名称
import TodoList from '../components/TodoList' // 引入组件

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    // 根据不同的常量名称，显示不同的信息数据，第一个默认全部
    case VisibilityFilters.SHOW_ALL:
      return todos
    // 正常触发挂载上面的常量，没有触发第二个过滤方法
    case VisibilityFilters.SHOW_COMPLETED:
      return todos.filter(t => t.completed) // 改变里面的completed的值
    case VisibilityFilters.SHOW_ACTIVE:
      return todos.filter(t => !t.completed)
    default:
      throw new Error('Unknown filter: ' + filter)
  }
}
// 这是核心干活的二个函数
// 1、把所有的state转成props，放入对象里面
const mapStateToProps = state => ({
  // 这里多加了一层函数封装处理不同动作逻辑，传入state.todos
  todos: getVisibleTodos(state.todos, state.visibilityFilter)
})
// 2、把所有的actions的dispatch灌进去
const mapDispatchToProps = dispatch => ({
  toggleTodo: id => dispatch(toggleTodo(id))
})

// 这是拆成二个文件（可以在组件内完成以上写法）
// 最终 redux连接的时候合并进去，把二个函数和组件todoList合并灌入
export default connect( mapStateToProps, mapDispatchToProps)(TodoList)
